<template>
	<div>
		<picker mode="multiSelector" :range-key="lang==='zh'?'name':'name_ru'" @change="confirm"
			@columnchange="columnchange" :range="multiSelector">
			<div v-if="loading">{{$t('加载中')}}...</div>
			<div v-else class="select-btn" @click="show=!show" style="color: #38f;">{{$t('请选择')}}</div>
		</picker>
	</div>
</template>

<script>
	export default {
		props: ["messageItem"],
		data() {
			return {
				lang: uni.getStorageSync("lang"),
				refresh: 0,
				loading: false,
				defaultselector: [0, 0],
				show: false,
				multiSelector: [
					[],
					[]
				]
			}
		},
		created() {
			this.getList(0, 0);
		},
		methods: {
			change(e) {
				console.log(e);
			},
			getList(pid, column) {
				this.loading = true;
				uni.request({
					url: this.messageItem.messageAttr.request_url,
					data: {
						pid
					},
					success: res => {
						const data = res.data.data;
						if (res.data && data && data[0]) {

							this.multiSelector[column] = data;
							if (this.multiSelector[column + 1] && !this.multiSelector[column + 1].length) {
								this.getList(data[0].id, 1)
							} else {
								this.loading = false;
							}
						}
					}
				})
			},
			confirm(e) {
				const [column1Index, column2Index] = e.detail.value;
				this.defaultselector = [column1Index, column2Index];
				const text =
					`${this.multiSelector[0][column1Index].name} ${this.multiSelector[1][column2Index].name}`
				const text_ru =
					`${this.multiSelector[0][column1Index].name_ru} ${this.multiSelector[1][column2Index].name_ru}`
				const value = {
					citySelect1: {
						label: this.lang==='zh'?this.multiSelector[0][column1Index].name:this.multiSelector[0][column1Index].name_ru,
						value: this.multiSelector[0][column1Index].id,
					},
					citySelect2: {
						label: this.lang==='zh'?this.multiSelector[1][column1Index].name:this.multiSelector[1][column1Index].name_ru,
						value: this.multiSelector[1][column2Index].id,
					}
				}
				this.$emit("setGoToFormKV", {
					key: this.messageItem.messageAttr.eventKey,
					value,
					text: this.lang === 'zh' ? text : text_ru,
					messageItem: this.messageItem
				})
			},
			columnchange(e) {
				const {
					column,
					value: index
				} = e.detail;
				this.defaultselector[column] = index
				if (column === 0) {
					this.getList(this.multiSelector[0][index].id, 1)
				}
			}
		}
	}
</script>

<style lang="scss">
	.select-btn {
		border: 1rpx solid #ddd;
		border-radius: 10rpx;
		background-color: #fff;
		margin-top: 15rpx;
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		&:active {
			background-color: #f5f5f5;
		}
	}
</style>